<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>晨的博客</title>

    <script src="<%=basePath%>../static/jquery/jquery.js"></script>
    <script type="text/javascript" src="<%=basePath%>../static/layui/layui.js"></script>
    <link rel="stylesheet" href="<%=basePath%>../static/layui/css/layui.css">
    <link rel="stylesheet" href="<%=basePath%>../common/prism/prism.css">
    <script src="<%=basePath%>../common/prism/prism.js"></script>


    <link rel="stylesheet" href="<%=basePath%>../static/semantic-ui/semantic.css">
    <script src="<%=basePath%>../static/semantic-ui/semantic.js"></script>
    <link rel="stylesheet" href="<%=basePath%>../common/tocbot/tocbot.css">
    <script src="<%=basePath%>../common/tocbot/tocbot.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>

    <link rel="stylesheet" href="<%=basePath%>../common/css/magnific-popup.css">
    <script src="<%=basePath%>../static/editor.md/lib/marked.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/lib/prettify.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/lib/raphael.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/lib/underscore.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/lib/sequence-diagram.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/lib/flowchart.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/lib/jquery.flowchart.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/editormd.js"></script>
    <script src="<%=basePath%>../common/waypoints/jquery.waypoints.min.js"></script>
    <link rel="stylesheet" href="<%=basePath%>../common/css/typo.css">
    <link rel="stylesheet" href="<%=basePath%>../common/css/animate.css">

</head>

<style type="text/css">

    .layui-btn{
        height:38px;
        width: 68px;
        line-height:38px;
        border:1px solid transparent;
        padding:0 18px;
        background-color:#009688;
        color:#fff;
        white-space:nowrap;
        text-align:center;
        font-size:14px;
        border-radius:10px;
        cursor:pointer
    }
    *{
        margin: 0 auto;
        padding: 0;
    }

   .bg{
        clear: both;
        background: url("<%=basePath%>../static/image/main_bg.jpg") no-repeat;
        background-size: cover;
    }


    .top{
        position:fixed;
        top: 0;
        width: 100%;
        height: 75px;
        background-color: #848484;
        z-index: 9999;
        opacity: 0.8;
    }


    .topFont{
        line-height: 75px;
        font-size: 28px;
        font-family: Consolas;
        color: rgba(255,255,255,.7);
        font-weight: bold;


    }
    .topFont a{
        text-decoration: none;
        text-align: center;
        color: #9c3328;
        font-size: 19px;

    }

    .topA{
        height: 75px;
        width: 100px;
        text-align: center;

    }
    .topA:hover{

        background: powderblue;
        opacity: 0.9;
        color: black;
    }

    .first{
        margin-top: 80px;
    }

    .type{
        position: relative;
        display: inline-block;
        width: 100px;
    }

    .down-child{
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 100px;

        box-shadow: 0px 8px 16px  rgba(0,0,0,0.2);

    }
    .down-child a{

        color: saddlebrown;
        font-weight: normal;
        text-decoration: none;
        display: block;
        height: 45px;
        line-height: 45px;

    }

    /* 悬停时显示下拉菜单 */
    .type:hover .down-child {
        display: block;
    }

    .down-child a:hover{
        background-color: gainsboro;
    }


    .bottomMsg{
        height: 200px;
        width: 100%;
        background-color: #1b1c1d;
        margin-top:10px;
        text-align: center;
        line-height: 100px;
        color: white;
        opacity: 0.85;
    }


    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width:12px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
        border-radius:10px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius:10px;
        background:rgba(0,0,0,0.1);
        -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
        background:rgba(255,0,0,0.4);
    }

    .arc{
        margin-top: 20px;
        width: 95%;
        border-radius: 10px;
        box-shadow: 1px 4px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
        background-color: snow;
        opacity: 0.85;
        min-height: 1000px;

    }
    .arc_title{
        height: 80px;
        text-align: center;
        font-size: 30px;
        font-family: 宋体;
        padding-top: 10px;
        color: #848484;
        line-height: 60px;
    }

    .arc_count{
        text-align: right;
        padding-right: 50px;
        font-family: 华文细黑;
        font-size: 15px;
        padding-bottom: 10px;
        color: black;
        font-weight: 100;
    }

.down{
    margin-top: 20px;
    height: 50px;
    padding-left: 300px;

}

    .zan{
        height: 40px;
        width: 100px;
        border: 1px steelblue solid;
        line-height: 40px;
        text-align: center;
        border-radius: 10px;
        float: left;
        margin-left: 132px;
    }
    .zan:hover{
        background-color: deeppink;
        color: whitesmoke;
    }

    .share{
        height: 40px;
        width: 100px;
        border: 1px green solid;
        line-height: 40px;
        text-align: center;
        border-radius: 10px;
        float: left;
        margin-left: 10px;
        color: green;
    }
    .share:hover{
        background-color: seagreen;
        color: whitesmoke;
    }

</style>

<body class="bg">


<%--top开始--%>
<div class="layui-fluid top " >
    <div class="layui-col-md12">
        <div class="layui-container">
            <div class="layui-col-md4 topFont">
                <span>chen&nan|blog</span>
            </div>
            <div class="layui-col-md7 topFont layui-col-md-offset1">
                <div class="layui-fluid">
                    <div class="layui-col-md3">
                        <div class="topA" >
                            <a href="${pageContext.request.contextPath}/index.jsp" class=" layui-icon layui-icon-home" style="color: #9c3328" > 主页</a>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="topA">
                            <a href="#" class=" layui-icon layui-icon-tabs" > 归档</a>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="topA">
                            <a href="#" class=" layui-icon layui-icon-about" > 关于</a>

                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="topA">
                            <div class="type">

                                <a href="#" class=" layui-icon layui-icon-down" > 分类</a>
                                <div class="down-child"> <!-- 二级菜单 -->
                                    <c:forEach var="type" items="${types}">
                                        <a href="${pageContext.request.contextPath}/article/article_type/0/${type.type_id}">${type.type_name}</a>
                                    </c:forEach>

                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
<%--top结束--%>

<%--正文开始 --左边--%>
<div class="layui-container animate__fadeIn ">

    <div class="layui-col-md12   first">
     <div class="arc " >
         <div class="arc_title">
         ${articleDetail.article_title}
         </div>
         <div class="arc_count">
             <span>${articleDetail.article_data}</span>&nbsp; ·&nbsp;
              <span id="lik">${articleDetail.like_count} 次喜欢</span>&nbsp; ·&nbsp;
             <span>${articleDetail.read_count} 次阅读</span>
         </div>

         <div id="thing" class="typo typo-selection  ">
                 <div id="doc-content" class="js-toc-content">

                     <textarea style="display:none;">${articleDetail.content_html}</textarea>
                 </div>
         </div>
         <div style="height: 30px;background-color:thistle;margin-top: 30px;opacity: 0.8">
             <p style="text-align: center;font-size: 14px;font-family: 华文细黑;line-height: 30px">
                 努力变好
             </p>
         </div>
         <div class=" down">
             <a href="javascript:void(0)" onclick="zan()" ><div class="layui-icon layui-icon-praise zan"> 点赞</div></a>
             <a href="#" ><div class="layui-icon layui-icon-share share"> 分享</div></a>
     </div>
         <div  style="height: 30px;margin-top: 20px;line-height: 30px;padding-left: 50px">
             <a  class="layui-icon layui-icon-note" href="/article/article_type/0/${type.type_id}">  ${type.type_name}</a>
         </div>

         <br><br><br><br><br><br>
     </div>



    </div>

</div>

<%--中间结束--%>

<%--评论开始--%>


<%--目录--%>
<div class="layui-btn-group " id="toolBar" style="width: 15px;right: 0;padding-right: 100px;position: fixed;bottom: 0;z-index: 10;padding-bottom: 20px;display: none">
    <div>
        <button type="button" style="border-radius: 8px;height: 50px;width: 60px" id="up" class="layui-btn layui-icon layui-icon-up"></button>
    </div>

</div>


<%--底部开始--%>
<div class="layui-col-md12 bottomMsg">
    <div>please bottom
    </div>
</div>



<script>




    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true,
        });
        $("code").addClass('language-css');

    });





    $('#up').click(function () {
        $(window).scrollTo(0,500);
    });

    var waypoint = new Waypoint({
        element: document.getElementById('thing'),
        handler: function(direction) {
            if (direction=='down'){
                $('#toolBar').show(300);
            } else {
                $('#toolBar').hide(300);
            }
        }
    });
    

    function zan(){
        $.ajax({
            url:"/article/praise/${articleDetail.article_id}",
            type:"get",
            dataType:"json",
            success:function (data) {
                layer.msg('谢谢你的点赞~',{icon:1,time:1200,offset:500});

                $('#lik').html(data['article'].like_count+" 次喜欢");

            }

        })
    }
</script>
</body>
</html>
